<template>
    <div class="recent-template-style">
        <ul>
            <li class="item-li" v-for="(item,index) in templateList" :key="index">
                <div style="width: 100%">
                    <i :class="`ico16 ${item.templeteIcon}`"></i>
                    <a
                        target="_blank"
                        :href="`${ctxPath}/collaboration/collaboration.do?method=newColl&templateId=${item.id}&from=templateNewColl`">
                        {{item.subject}}
                    </a>
                    <i class="flowBook ico16 flowInstructions_16" @click="showWorkflowBook(item)"></i>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import api from "@/api";
import globalData from "@/plugins/data";
import globalMethods from "@/plugins/methods";

export default {
  name: "RecentTemplate",
  data() {
    return {
      templateList: []
    }
  },
  methods: {
        showWorkflowBook(item){
            var url =`${globalData.ctxPath}/templateInsController.do?method=templateIns&id=${item.id}&showAll=1`;
            const dialog = globalMethods.fullDialog({
                url,
                title: this.$i18n('template.ins.title.js'),
                footer: null,
                onCancel() {
                    dialog.close();
                },
            });
        }
  },
  created() {
    this.ctxPath = globalData.ctxPath;
    this.api = api;
  },
  mounted() {
    this.api.getRecentTemplateList()
      .then(res => {
        if (!res || typeof res !== 'object') {
          return;
        }
        this.templateList.push(...res);
        console.log(this.templateList);
        console.log(typeof res);
      })
  },
}
</script>

<style lang="scss">
.recent-template-style {
  .item-li {
    margin: 10px 40px 10px 10px;

    a {
      margin-left: 10px;
    }
    /*图标库冲突，暂时用雪碧图*/  
    i.ico16{
        &:before{
            content: '';
        }
    }  

    &:hover {
      .flowBook {
        display: inline-block;
        float: right;
      }
    }
  }

  .flowBook {
    display: none;
  }
}
</style>